<template>
  <div class="inner-page">
    <div class="inner-page-title mb-30">
      <span>云原生数据库 TeleDB for HBase</span>
      <div class="fr">
        <span class="btn">演示动画</span>
        <span class="btn">产品试用</span>
      </div>
    </div>
    <div class="flex-row">
      <div class="left-row flex-1 pr-20">
        <div class="section-title">
          <svg-icon iconName="biaoti1" class="mr-10"></svg-icon>产品介绍
        </div>
        <div class="fs-14 f-normal mt-20 mb-20">
          数据库HBASE是基于开源
          HBase引擎支持NOSQL和二级索引，提供高性能、低延迟、易运营实时分析云服务，适合PB级，千万级QPS的分布式计算应用场景，是风控、推荐、广告、物联网、车联网、Feeds流、数据大屏等场景首选数据库。
        </div>
        <div class="section-title">
          <svg-icon iconName="biaoti2" class="mr-10"></svg-icon>核心能力
        </div>
        <div class="flex-grid mt-20">
          <div class="list-box" v-for="(item, index) in list" :key="index">
            <div class="title">
              <span>{{ index + 1 }}</span> {{ item.name }}
            </div>
            <div class="mb-20">{{ item.label }}</div>
          </div>
        </div>
      </div>
      <div class="left-row flex-1 pl-20">
        <div class="section-title">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>应用场景
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            :label="item.title"
            :name="item.name"
            v-for="(item, index) in tabList"
            :key="index"
          >
            <p>{{ item.label }}</p>
            <div class="img-box bor">
              <img :src="item.imgUrl" alt="" />
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="section-title mt-10">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>产品功能架构
        </div>
        <div class="framework-img mt-20 bor">
          <img :src="frameworkImg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'nav8',
  data () {
    return {
      activeName: '0',
      list: [
        {
          name: '性能大提升',
          label: '新一代Hbase2.0内核，性能优化较1.X提升60%~200%，降低毛刺。'
        },
        {
          name: '成本超节省',
          label:
            '支持日志和表级数据冷热分离，将冷数据存储到低成本介质，存储成本下降65%。通过zstd等高性能压缩算法，压缩率提升1倍。'
        },
        {
          name: '存储高可靠',
          label: '分布式存储集群架构，高可用集群可靠性达99.99999%服务。'
        },
        {
          name: '服务高可用',
          label:
            'HA实时监控系统，单节点故障迅速转移，保障业务不中断 服务逬程监控与自动恢复，秒级恢复时间。'
        },
        {
          name: '简易运营',
          label:
            '可视化管理平台和可视化shell，免去安装客户端烦恼。表级指标监控，实时历史指标回放。自动巡检，预警诊断，读写场景优化配置推荐，自定义告警规则和全面的监控信息，提供集群组件和实例的CPU使用率、IOPS、流入流出的流量等监控信息和历史趋势图回放。'
        },
        {
          name: '备份策略丰富',
          label: '周期手动，全量增量，交叉定制，满足复杂业务场景。'
        },
        {
          name: 'SQL和二级索引支持',
          label: '支持标准SQL和全局索引、本地索引、函数索引、覆盖索引。'
        },
        {
          name: '集群场景配置化',
          label:
            '自动采集指标分析，并根据业务场景（读多写少，写多读少，读写均衡，mob）做配置推荐。'
        }
      ],
      tabList: [
        {
          title: '场景1',
          name: '0',
          imgUrl: require('../../assets/images/pic/img-8-1.png'),
          label: ''
        },
        {
          title: '场景2',
          name: '1',
          imgUrl: require('../../assets/images/pic/img-8-2.png'),
          label: '1．传媒、新闻、社交分发、聊天信息'
        },
        {
          title: '场景3',
          name: '2',
          imgUrl: require('../../assets/images/pic/img-8-3.png'),
          label: '2.空间位置场景'
        }
      ],
      frameworkImg: require('../../assets/images/pic/img-8.png')
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style scoped lang="scss">
.flex-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
.list-box {
}
</style>
